<template>
  <view class="work-report">
    <NavBar
      v-if="appInfoStore().isH5"
      title="工作汇报"
      :backgroundColor="'#fff'"
    />
    <view
      v-if="true"
      :class="{ 'padding-top-navbar': appInfoStore().isH5 }"
    >
      <view class="work-report-title">
        <view class="work-report-type">
          <view
            class="work-report-type-item"
            @click="handleWriteWorkReport"
          >
            <text>写日报</text>
            <img
              src="https://img.alicdn.com/imgextra/i3/1034622205/O1CN01B4El2o1S9wNWvd81g_!!1034622205.png"
              alt=""
            />
          </view>
          <view class="work-report-type-item">
            <text>写周报</text>
            <img
              src="https://img.alicdn.com/imgextra/i4/1034622205/O1CN011DLkM81S9wNXZYyQ8_!!1034622205.png"
              alt=""
            />
          </view>
          <view class="work-report-type-item">
            <text>写月报</text>
            <img
              src="https://img.alicdn.com/imgextra/i2/1034622205/O1CN01TddwTA1S9wNYczwbk_!!1034622205.png"
              alt=""
            />
          </view>
        </view>
        <view class="see-work-report">
          <view class="see-work-report-title">看汇报</view>
          <view class="see-work-report-con">
            <nut-menu>
              <template #icon>
                <i class="iconfont icon-daosanjiao"></i>
              </template>
              <nut-menu-item
                v-model="state.value1"
                :options="state.options1"
              />
              <nut-menu-item
                v-model="state.value2"
                :options="state.options2"
              />
            </nut-menu>
            <nut-checkbox
              v-model="checkbox1"
              icon-size="15"
              label="未读"
              >未读
            </nut-checkbox>
          </view>
        </view>
      </view>
      <view class="work-report-content">
        <view
          class="work-report-content-item"
          v-for="itm in 10"
          :key="itm"
          @click="handleReportDetail"
        >
          <view class="report-content-box">
            <view class="report-content-title">
              <view class="report-content-title-left">
                <img
                  src=""
                  alt=""
                />
                <view class="report-left-text">
                  <text>张三的周报</text>
                  <text>2025-12-12 08:06</text>
                </view>
              </view>
              <view class="report-content-title-right">
                <text>0人阅读</text>
              </view>
            </view>
            <view class="report-content-con">
              <text>今日完成的工作：</text>
              <view class="report-content-con-text">
                <text
                  >1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析</text
                >
                <text>2、完成项目B的设计方案</text>
                <text>3、完成项目C的编码工作</text>
              </view>
            </view>
          </view>
        </view>
        <view class="work-report-content-more">已经到底啦！</view>
      </view>
    </view>
    <view
      v-else
      class="none-work-report"
      :class="{ 'padding-top-navbar': appInfoStore().isH5 }"
    >
      <view class="none-work-report-text">
        <img
          src="https://img.alicdn.com/imgextra/i2/1034622205/O1CN01pWJIWk1S9wNWodJNC_!!1034622205.png"
          alt=""
        />
        <text>已截止的汇报</text>
        <text>该汇报已截止提交，截止后无法填写</text>
      </view>
      <view class="none-work-report-time">
        <view class="deadline-time">
          <view class="deadline-time-title">
            <icon
              type="success"
              size="20"
              color="#fff"
            ></icon>
            <text>截止时间</text>
          </view>
          <view class="deadline-time-con">
            <text>2025-12-12 08:06</text>
          </view>
        </view>
        <view class="fill-in-time">
          <view class="fill-in-time-title">
            <icon
              type="success"
              size="20"
              color="#fff"
            ></icon>
            <text>填写时间</text>
          </view>
          <view class="fill-in-time-con">
            <text>2025-12-12 08:06</text>
          </view>
        </view>
      </view>
    </view>
    <!-- www -->
    <nut-popup
      position="bottom"
      round
      :style="{ height: '86%' }"
      v-model:visible="state.isVisible"
    >
      <view class="report-detail">
        <view class="report-detail-box">
          <view class="report-detail-title">
            <view class="report-detail-title-left">
              <view class="img-box">
                <img
                  src="https://img.alicdn.com/imgextra/i2/1034622205/O1CN01oK9OyG1S9wNSUhntH_!!1034622205.png"
                  alt=""
                />
              </view>
              <view class="report-text">
                <text>张三的周报</text>
                <text>2025-12-12 08:06提交</text>
              </view>
            </view>
            <view class="report-detail-title-right">
              <text><i class="iconfont icon-yanjing"></i>0人已读</text>
            </view>
          </view>
          <view class="report-detail-con">
            <view class="detail-con-box">
              <view
                class="detail-con-item"
                v-for="itm in conItems"
                :key="itm"
              >
                <view class="detail-con-item-title">
                  <text>{{ itm.title }}</text>
                </view>
                <view class="detail-con-item-text">
                  <text
                    class="con-text"
                    :class="{ collapsed: !itm.isExpanded }"
                  >
                    {{ itm.text }}
                  </text>
                  <view
                    class="toggle-btn"
                    @click="toggleExpand(itm)"
                    v-if="itm.showToggle"
                  >
                    {{ itm.isExpanded ? "收起" : "展开" }}
                    <i
                      class="iconfont icon-xiajiantou"
                      :class="{ 'rotate-180': itm.isExpanded }"
                    ></i>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="detail-comment">
            <view class="detail-comment-box">
              <view
                class="detail-comment-input"
                @click="goComment"
              >
                <text>评论</text>
              </view>
              <i class="iconfont icon-kongxin-damuzhizhaoshang"></i>
              <i class="iconfont icon-sangediandian"></i>
            </view>
          </view>
        </view>
      </view>
    </nut-popup>
  </view>
</template>

<script setup lang="ts">
import { onMounted, reactive } from "vue";
import { appInfoStore } from "@/stores/appInfo";
import NavBar from "@/components/navBar/index.vue";
import { ref } from "vue";
import { navigateTo } from "@tarojs/taro";

const conItems = ref([
  {
    id: 0,
    title: "本周总结",
    isExpanded: false,
    showToggle: true,
    text: "1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析",
  },
  {
    id: 1,
    title: "下周工作计划",
    isExpanded: false,
    showToggle: true,
    text: "测试测试",
  },
  {
    id: 2,
    title: "需要协调与帮助",
    isExpanded: false,
    showToggle: true,
    text: "---",
  },
]);
const state = reactive({
  isExpanded: false,
  longText:
    "1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析1、完成项目A的需求分析",
  options1: [
    { text: "汇报给我", value: 0 },
    { text: "抄送给我", value: 1 },
    { text: "我的", value: 2 },
  ],
  options2: [
    { text: "日报", value: 0 },
    { text: "周报", value: 1 },
    { text: "月报", value: 2 },
  ],
  value1: 0,
  value2: 0,
  isVisible: false,
  showToggle: true,
});
onMounted(() => {
  if (state.longText.length < 10) {
    state.showToggle = false;
  }
  conItems.value.map((item: any) => {
    if (item.text.length < 10) {
      item.showToggle = false;
    }
  });
});

const handleWriteWorkReport = () => {
  console.log("写日报");
  navigateTo({
    url: "/packageB/pages/workReport/writeWorkReport/index",
  });
};
const handleReportDetail = () => {
  console.log("汇报详情");
  state.isVisible = !state.isVisible;
};
const toggleExpand = (itm: any) => {
  conItems.value.map((item: any) => {
    if (item.id === itm.id) {
      item.isExpanded = !item.isExpanded;
    }
  });
};
// 去评论
const goComment = () => {
  console.log("去评论");
};
</script>

<style lang="less">
@import url("./index.less");
// @import "../../../assets/css/index.css";
@import "@/assets/css/index.less";
</style>
